import React,{lazy,Suspense} from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import {BrowserRouter as Router,Route,NavLink,Switch} from 'react-router-dom'

// 动态加载
// import DemoA from './demo/demoA'
// import DemoB from './demo/demoB'
const DemoA=lazy(()=>import('./demo/demoA'))    // 延迟加载
const DemoB=lazy(()=>import('./demo/demoB'))

// hash路由 兼容性强 #
// history路由 兼容性弱

const NotFound=()=>(<div>404</div>)
ReactDOM.render(
  <div>
    <App />
    <Suspense fallback={<div>loading...</div>}>
    <Router>
      main
      <br />
      {/* 动态规划部分 lazyload的主战场 */}
        <NavLink to="/demoA">DemoA</NavLink>
        <NavLink to="/demoB">DemoB</NavLink>
      <Switch>
        <Route path='/demoA' component={DemoA}></Route>
        <Route path='/demoB' component={DemoB}></Route>
        <Route path='*' component={NotFound}></Route>
      </Switch>
    </Router>
    </Suspense>
  </div>
  ,
  document.getElementById('root')
)
